<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="栏目" :label-width="formLabelWidth" v-if="form.id">
				<el-select v-model="form.channelId" placeholder="请选择" v-if="form.id">
					<el-option :label="selLeftTree.name" :value="selLeftTree.id">
						<el-tree :data="leftTreeData" :props="treeProps" accordion highlight-current @node-click="handleSelectionChange"></el-tree>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标题" :label-width="formLabelWidth" prop="title">
				<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input>
			</el-form-item>
			<el-form-item label="作者" :label-width="formLabelWidth" prop="author">
				<el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
			</el-form-item>
			<el-form-item label="来源" :label-width="formLabelWidth" prop="source">
				<el-input v-model="form.source" autocomplete="off" placeholder="请输入来源"></el-input>
			</el-form-item>
			<el-form-item label="摘要" :label-width="formLabelWidth" prop="info">
				<el-input type="textarea" :rows="2" placeholder="请输入摘要" v-model="form.info"></el-input>
			</el-form-item>
			<el-form-item label="关键字" :label-width="formLabelWidth" prop="keywords">
				<el-input v-model="form.keywords" autocomplete="off" placeholder="请输入关键字"></el-input>
			</el-form-item>
			<el-form-item label="缩略图" :label-width="formLabelWidth" prop="picname">
				<fortress-upload type="image" name="picname" v-model="form"></fortress-upload>
				<resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
			</el-form-item>
			<el-form-item label="发布人" :label-width="formLabelWidth" prop="publisher">
				<el-input v-model="form.publisher" autocomplete="off" placeholder="请输入发布人"></el-input>
			</el-form-item>
			<el-form-item label="发布时间" :label-width="formLabelWidth" prop="pubdate">
				<el-date-picker v-model="form.pubdate" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
			</el-form-item>
			<!-- <el-form-item label="访问地址" :label-width="formLabelWidth" prop="url">
        <el-input
          v-model="form.url"
          autocomplete="off"
          placeholder="请输入访问地址"
        ></el-input>
      </el-form-item> -->
			<el-form-item label="内容" :label-width="formLabelWidth" prop="contents">
				<fortress-wang-editor v-model="form.contents"></fortress-wang-editor>
			</el-form-item>
			<!-- 扩展字段 start -->
			<el-form-item :label="item.colTitle" :label-width="formLabelWidth" prop="name" v-for="item in cols" :key="item.id">
				<!-- 多行文本 2-->
				<el-input v-if="item.formType == 2" type="textarea" :rows="2" :placeholder="`请输入${item.colTitle}`" v-model="form.colData[item.propName]"></el-input>
				<!-- 富文本 2-->
				<fortress-wang-editor v-else-if="item.formType == 3" v-model="form.colData[item.propName]"></fortress-wang-editor>
				<!-- 下拉 4-->
				<el-select v-model="form.colData[item.propName]" placeholder="请选择" v-else-if="item.formType == 4">
					<el-option v-for="c in item.listdataConfig" :label="c" :key="c" :value="c"></el-option>
				</el-select>
				<!-- 单选框 5-->
				<el-radio-group v-model="form.colData[item.propName]" v-else-if="item.formType == 5">
					<el-radio v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-radio>
				</el-radio-group>
				<!-- 复选框 6-->
				<el-checkbox-group v-model="form.colData[item.propName]" v-else-if="item.formType == 6">
					<el-checkbox v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-checkbox>
				</el-checkbox-group>
				<!-- 日期 7-->
				<el-date-picker v-model="form.colData[item.propName]" v-else-if="item.formType == 7" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
				<!-- 日期时间 8-->
				<el-date-picker v-model="form.colData[item.propName]" v-else-if="item.formType == 8" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				<!-- 图片上传组件 9-->
				<template v-else-if="item.formType == 9">
					<template v-if="item.limitSize > 1">
						<fortress-upload type="image" :name="item.propName" :formData="form.colData" :multiple="true" :limit="item.limitSize"></fortress-upload>
						<resource-select :modelName="`form.colData.${item.propName}`" type="image" :multiple="true" @choosed="resourceChoosed"></resource-select>
					</template>
					<template v-else>
						<fortress-upload type="image" :name="item.propName" :formData="form.colData"></fortress-upload>
						<resource-select :modelName="`form.colData.${item.propName}`" type="image" @choosed="resourceChoosed"></resource-select>
					</template>
				</template>
				<!-- 文件上传组件 10 默认多个-->
				<fortress-upload v-else-if="item.formType == 10" type="file" :formData="form.colData" :multiple="true" :limit="item.limitSize" :name="item.propName"></fortress-upload>
				<!-- 视频上传组件 11-->
				<fortress-upload v-else-if="item.formType == 11" type="video" :formData="form.colData" :limit="1" :name="item.propName"></fortress-upload>
				<!-- 开关 12-->
				<el-switch v-model="form.colData[item.propName]" v-else-if="item.formType == 12" active-text="按月付费" inactive-text="按年付费"></el-switch>
				<!-- 计数器 13-->
				<el-input-number v-model="form.colData[item.propName]" v-else-if="item.formType == 13"></el-input-number>
				<!-- 输入框 1-->
				<el-input v-else v-model="form.colData[item.propName]" autocomplete="off" :placeholder="`请输入${item.colTitle}`"></el-input>
			</el-form-item>
			<!-- 扩展字段 end -->

			<el-form-item label="属性" :label-width="formLabelWidth" prop="attr">
				<el-checkbox-group v-model="form.attr">
					<el-checkbox v-for="item in attrList" :label="item.id" :key="item.id">{{ item.title }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="标签" :label-width="formLabelWidth" prop="tags">
				<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
					<el-option v-for="item in tagList" :key="item.id" :label="item.title" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="专题" :label-width="formLabelWidth" prop="special">
				<el-checkbox-group v-model="form.special">
					<el-checkbox v-for="item in specialList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="浏览次数" :label-width="formLabelWidth" prop="click">
				<el-input-number v-model="form.click"></el-input-number>
			</el-form-item>
			<el-form-item label="权重排序" :label-width="formLabelWidth" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="draftForm()">存为草稿</el-button>
			<el-button type="primary" size="medium" @click="submitForm()" v-if="form.auditflag">提交审核</el-button>
			<el-button type="primary" size="medium" @click="submitForm()" v-else>发 布</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { cmschannelCols } from "@/api/cms/cmschannel.js"
import { cmsarticleInfo, cmsarticleSave, cmsarticleEdit } from "@/api/cms/cmsarticle.js"
import { cmssystagList } from "@/api/cms/cmssystag.js"
import { cmscusttagList } from "@/api/cms/cmscusttag.js"
import { cmssubjectList } from "@/api/cms/cmssubject.js"
import { enumList } from "@/api/public.api.js"
// import * as ftVal from "@/common/fortressValidator.js"
import ResourceSelect from "@/components/resource-select.vue"
import { ct } from "@/mixins/mixmethod.js"
export default {
	mixins: [ct],
	props: ["leftTreeData"],
	data() {
		return {
			visible: false,
			selLeftTree: {},
			form: {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},
			},
			cols: [],
			formLabelWidth: "120px",
			myconfig: window.$conf.commonConf.ueConfig,
			rules: {
				title: [{ required: true, message: "请输入标题", trigger: "blur" }],
				contents: [{ required: true, message: "请输入内容", trigger: "blur" }],
				channelId: [{ required: true, message: "请输入栏目", trigger: "blur" }],
			},
			ArticleStatus_cmsList: [],
			treeProps: {
				children: "children",
				label: function treeNameHandle(data) {
					console.log("treeProps", data)
					let c = data.category == 1 ? "栏目" : data.category == 2 ? "封面" : data.category == 3 ? "外链" : ""
					return data.name + (c ? "|(" + c + ")" : "")
				},
			},
			attrList: [],
			tagList: [],
			specialList: [],
		}
	},
	created() {
		this.getAttrList()
	},
	components: {
		"resource-select": ResourceSelect,
	},
	methods: {
		getAttrList() {
			cmssystagList().then(resp => {
				if (resp.code == 0) {
					this.attrList = resp.data
				}
			})
			cmscusttagList().then(resp => {
				if (resp.code == 0) {
					this.tagList = resp.data
				}
			})
			cmssubjectList().then(resp => {
				if (resp.code == 0) {
					this.specialList = resp.data
				}
			})
		},
		queryEnumList() {
			this.ArticleStatus_cmsList = []
			enumList("ArticleStatus", "cms").then(resp => {
				if (resp.code == 0) {
					this.ArticleStatus_cmsList = resp.data
				}
			})
		},
		init(id, treeId, treeName) {
			this.resetForm()
			this.queryEnumList()
			//初始扩展字段
			cmschannelCols(treeId).then(rp => {
				if (rp.code == 0) {
					this.$nextTick(() => {
						if (rp.data) {
							this.form.modelId = rp.data.model
							this.cols = rp.data.cols
							this.cols.forEach(item => {
								this.form.colData[item.propName] = ""
								this.form.colData[item.propName] = ""
								if (item.listdataConfig) {
									item.listdataConfig = item.listdataConfig.split(",")
								}
							})
							console.log("this.cols", this.cols)
							//修改
							if (id) {
								cmsarticleInfo(id).then(resp => {
									if (resp.code == 0) {
										this.$nextTick(() => {
											this.form = {
												...this.form,
												...resp.data,
											}
											for (var c in this.form.colData) {
												if (this.form.colData[c]) {
													this.form[c] = this.form.colData[c]
												}
											}
											this.selLeftTree = {
												id: resp.data.channelId,
												name: resp.data.channelIdName,
											}
											console.log("cmsarticleInfo", this.form)
										})
									} else {
										this.$msg({
											message: resp.msg,
											type: "error",
										})
									}
								})
							} else {
								this.form.channelId = treeId
								this.selLeftTree = {
									id: treeId,
									name: treeName,
								}
							}

							this.visible = true
						}
					})
				} else {
					this.$msg({
						message: rp.msg,
						type: "error",
					})
				}
			})
		},
		//提交表单数据
		submitForm(flag) {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if ("draft" == flag) {
						this.form.status = "0"
					} else {
						this.form.status = "2"
					}
					console.log(this.form)
					// //初始化colData信息
					// if (this.form.colData) {
					// 	for (var col in this.form.colData) {
					// 		this.form.colData[col] = this.form[col]
					// 	}
					// }
					//修改
					if (this.form.id) {
						cmsarticleEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						cmsarticleSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		//存为草稿
		draftForm() {
			this.submitForm("draft")
		},
		resetForm() {
			this.form = {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},
			}
			this.cols = []
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		//切换树数据选中状态
		handleSelectionChange(data) {
			if (data.category == 1) {
				this.selLeftTree.id = data.id
				this.selLeftTree.name = data.name
				this.form.channelId = data.id
			} else {
				this.$msg({
					message: "请选择列表类栏目",
					type: "error",
				})
			}
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
.select-new-tag {
	width: 100px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>
